import React, { Component } from 'react'

export default class componentName extends Component {
  constructor(props) {
    //1、这里接受父级组件传递的参数，类似vue中的props；实际是Vue借鉴了React的props写法；props是个对象
    super(props)
    this.state = {
      //类似Vue中的data；变量在这里声明，使用setState触发View更新
      num: 0,
      array: [2, 3, 4],
      object: {
        test: '这是测试',
      },
    }
  }
  componentWillMount() {
    //2、为什么不在这请求数据呢？因为componentWillMount的时候DOM还没有渲染出来，
    //ajax异步返回回来数据的时候，一些页面结构是需要根据数据渲染DOM的；
    //但是componentWillMount执行的时候没有DOM；会导致程序异常，所以在这个生命周期异步请求数据；

    //在哪里请求数据呢？
    //最好是在componentDidMount
    //原因是DOM已经加载，可以放心渲染数据啦
    console.log('这里数据挂在前执行')
  }
  componentDidMount() {
    //请求数据，获取dom结构
    // do something
  }

  shouldComponentUpdate(nextProps, nextState) {
    //console.log()
  }
  componentWillReceiveProps() {
    console.log('componentDidUpdate')
  }
  componentWillUnmount() {}
  render() {
    return (
      <div>
        <h1>这是基础页面</h1>
        <h2>认识React生命周期</h2>
        <h3>props:受父级组件传递的参数；具体查看备注1、</h3>
        <h3>constructor:内部初始化，当前组件所有活动的开始</h3>
        <h3>
          componentWillMount:数据挂载前执行，这个很少用到；但是在面试过程中会被问，为什么不在componentWillMount这个请求数据？答案参考注释2、
        </h3>
        <h3>componentDidMount:类似Vue中的mounted</h3>
        <h3>render:类似Vue中的template；实际是JSX；里面可以写一下html</h3>
        <h3>
          shouldComponentUpdate:面试大概率会问，接收两个参数，返回一个boolean值；返回boolean为true;表示当前组件可以更新，返回boolean为false;不允许当前组件更新
        </h3>
        <h3>
          componentWillReceiveProps:当prop变化时这个函数会执行；props是父组件传递过来的，componentWillReceiveProps实际就是监听父组件传递过来的props的；但是在react17版本已经废弃
        </h3>
        <h3>
          componentWillUnmount:组件即将卸载时执行;主要作用：组件卸载时清除定时器，延时器，取消网络请求等
        </h3>
      </div>
    )
  }
}
